<template>
	<view class="cashier_result">
		<i-page :back="false" title="收银台" bgColor="#f3f4f5">
			<i-card top="20rpx">
				<view class="body">
					<image v-if="orderData.rechangeStatus === '10006002' || orderData.goodsOrderStatus === '10007002'"
						src="../../static/images/success_icon.png" mode=""></image>
					<image v-else src="../../static/images/wait_icon.png" mode=""></image>
					<text>{{(orderData.rechangeStatus === '10006002' || orderData.goodsOrderStatus === '10007002') ? '支付成功' : '待支付'}}</text>
					<view class="buttons">
						<i-buttons v-if="pageData.status === 'created' || pageData.status === 'toali'" color="#16161F" radius='4' padding="16rpx 84rpx"
							@click="goOrder">查看订单</i-buttons>
						<i-buttons
							v-if="orderData.rechangeStatus === '10006002' || orderData.goodsOrderStatus === '10007002'"
							color="#16161F" radius='4' padding="16rpx 112rpx"
							@click="navTo('', 'navigateBack')">完成</i-buttons>
<!-- 							<i-buttons
								v-if="pageData.status === 'toali' && (orderData.rechangeStatus !== '10006002' || orderData.goodsOrderStatus !== '10007002')"
								color="#16161F" radius='4' padding="16rpx 112rpx"
								@click="navTo('/pages/views/web_view', 'navigateTo')">重新支付</i-buttons> -->
					</view>
				</view>
			</i-card>
			<i-card top="20rpx" :background="orderData.rechangeStatus === '10006002' && orderData.isUse === '1' ? '#fff' : '#f3f4f5'">
				<view class="alig">
					<!-- #ifdef APP-PLUS -->
					<view class="qrCode" :style="{width: pageData.type === 'store' && orderData.rechangeStatus === '10006002' ? '120px' : '0',
						height: pageData.type === 'store' && orderData.rechangeStatus === '10006002' ? '120px' : '0' }">
						<canvas id="canvas" style="width: 120px;height: 120px;" canvas-id="canvas"></canvas>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="qrCode" v-if="orderData.rechangeStatus === '10006002' && orderData.isUse === '1'">
						<image style="width: 120px; height: 120px;" :src="orderData.qrCodeBase" mode=""></image>
					</view>
					<!-- #endif -->
					<view class="code_message"
						v-if="pageData.type === 'store' && orderData.rechangeStatus === '10006002'">
						<text>券码信息</text>
						<text class="code_time">{{orderData.effTime}} 到期</text>
						<text>{{orderData.storeName}}</text>
					</view>
					<view class="code_s" v-if="pageData.type === 'store' && orderData.rechangeStatus === '10006002'">
						<text class="qrno">·{{orderData.qrNo}}</text>
						<text>待使用</text>
					</view>
				</view>
			</i-card>
		</i-page>
	</view>
</template>

<script lang="ts" setup>
	import {
		navTo
	} from '../../utils/common'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue';
	import {
		apiMerOrderDetail,
		apiShoppingMallOrderDetail,
	} from '../../api/order'
	import UQRCode from "uqrcodejs"
	import useStore from '../../stores/index'

	const store = useStore()
	
	const qr = new UQRCode();
	const orderData = ref<any>({})
	const ctx = ref<any>(null)
	const pageData = reactive({
		orderId: '',
		status: '',
		type: ''
	})

	onLoad((option) => {
		pageData.orderId = option.orderId
		pageData.status = option.status
		pageData.type = option.type
		console.log(option, 'option.orderIdoption.orderId');
		if (option.status === 'toali') {
			navTo('/pages/views/web_view', 'navigateTo')
		}
	})

	onShow(() => {
		ctx.value = null
		ctx.value = uni.createCanvasContext('canvas')
		switch (pageData.type) {
			case 'store':
				getOrderData(pageData.orderId)
				break
			case 'vip':
				getDetail(pageData.orderId)
				break;
			case 'give':
				// navTo('', 'navigateBack')
				break;
		}
	})

	const getOrderData = async (merOrderId : string) => {
		const {
			data
		} = await apiMerOrderDetail({
			merOrderId
		})
		orderData.value = data
		if (data.qrNo) {
			// #ifdef APP-PLUS
			getQR(data.qrNo)
			// #endif
		}
	}
	const getDetail = async (orderId : string) => {
		const {
			data
		} = await apiShoppingMallOrderDetail({
			orderId
		})
		orderData.value = data
	}

	const getQR = (data : string) => {
		uni.showLoading({
			title: '二维码生成中...'
		})
		// 设置二维码内容
		qr.data = data
		qr.size = 120;
		qr.make();
		qr.canvasContext = ctx.value;
		qr.drawCanvas();
		uni.hideLoading()
	}

	const goOrder = () => {
		switch (pageData.type) {
			case 'vip':
				navTo('/pages/orderDetail/vip_orderDetail?orderId=' + pageData.orderId, 'redirectTo')
				break;
			case 'store':
				navTo('/pages/orderDetail/index?merOrderId=' + pageData.orderId, 'redirectTo')
				break;
			default:
				break;
		}
	}
</script>

<style lang="scss" scoped>
	.cashier_result {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: $backColor;

		.body {
			@include flexCC;

			image {
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 20rpx;
			}

			text {
				@include titlefont;
			}

			.buttons {
				margin-top: 40rpx;
				width: 100%;
				@include flexR;
				justify-content: space-around;
				// padding: ;
			}
		}

		.alig {
			@include flexCC;

			.code_message {
				width: 100%;
				@include flexC;
				@include titlefont(28rpx);
				margin-bottom: 16rpx;

				.code_time {
					margin: 4rpx 0;
					@include dfont(26rpx);
					color: #A0A0AD;
				}
			}

			.code_s {
				margin-top: 6rpx;
				width: 100%;
				@include flexRS;

				text {
					@include titlefont(26rpx);
				}

				.qrno {
					@include dfont(26rpx);
				}
			}
		}


	}
</style>